<template>
  <!-- 上传组件
   1：上传功能
   2：图片回显
   3：图片删除
   4：图片预览
   5：上传进度条显示
 -->

  <div>
    SecretId: AKIDf7JpO2CbXQO7dqulNfKnF0CfuxznsAqF SecretKey:
    TH1c6g3qNjriqdJkhTBfkZ8SVTB5oHZm
    <!-- 腾讯云使用
    1：下载插件 cos-js-sdk-v5
    2:导入  import COS from 'cos-js-sdk-v5'
    3:验证身份（实例化）
       const cos = new COS({
        SecretId: 'AKIDf7JpO2CbXQO7dqulNfKnF0CfuxznsAqF',
        SecretKey: 'TH1c6g3qNjriqdJkhTBfkZ8SVTB5oHZm'
      })
    4：使用：
      cos.uploadFile(
        {
          Bucket: 'abc-1305249343' /* 填写自己的存储桶，必须字段 */,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 存储在桶里的对象键（ */,
          Body: file, // 上传文件对象
          onProgress: function(progressData) {
            console.log(JSON.stringify(progressData))
          }
        },
        function(err, data) {
          if (err) {
            console.log('上传失败', err)
          } else {
            console.log('上传成功', data)
          }
        }
      )

     -->

    <input type="file" @change="changeEvent">
    <!--
      el-upload
         action:默认上传的上传地址 必传参数
         name:上传文件对应的字段名
         http-request:自定义上传形为 (res)=>{res.file:上传的文件对象}
         show-file-list：是否显示上传文件列表，默认是显示
         before-upload：上传前的回调函数，需要return boolran值，true:正常上传  false:中止上传
                      一般用于限制上传文件大小与类型
     -->

    <el-upload
      action="#"
      :http-request="httpRequest"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <div class="main">
        <img v-if="imgSrc" :src="imgSrc" alt="">
        <i v-else class="el-icon-plus" />
      </div>
    </el-upload>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
// 验证身份
const cos = new COS({
  SecretId: 'AKIDf7JpO2CbXQO7dqulNfKnF0CfuxznsAqF',
  SecretKey: 'TH1c6g3qNjriqdJkhTBfkZ8SVTB5oHZm'
})

export default {
  data() {
    return {
      imgSrc: ''
    }
  },
  methods: {
    changeEvent(e) {
      const file = e.target.files[0]
      cos.uploadFile(
        {
          Bucket: 'abc-1305249343' /* 填写自己的存储桶，必须字段 */,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
          Body: file, // 上传文件对象
          onProgress: function(progressData) {
            console.log(JSON.stringify(progressData))
          }
        },
        function(err, data) {
          if (err) {
            console.log('上传失败', err)
          } else {
            console.log('上传成功', data)
          }
        }
      )
    },
    httpRequest(res) {
      console.log(res.file)
      cos.uploadFile(
        {
          Bucket: 'abc-1305249343' /* 填写自己的存储桶，必须字段 */,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: res.file
            .name /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          if (err) {
            console.log('上传失败', err)
          } else {
            this.imgSrc = 'http://' + data.Location
            console.log('上传成功', data)
          }
        }
      )
    },
    beforeUpload(file) {
      console.log(file)
      //  限制2Mb内
      const limitSize = file.size / 1024 / 1024 < 2
      if (!limitSize) {
        this.$message.error('请上传小于2mb文件')
      }
      // 限制只允许 上传png
      const limitType = file.type === 'image/png'
      if (!limitType) {
        this.$message.error('请上传png')
      }

      return limitSize && limitType
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 180px;
  height: 180px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  i {
    font-size: 30px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
